<template>
  <div class="container">
    <div class="user_balances_list">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="search">
          <a-form-item label="创建时间">
            <a-range-picker
              v-model="queryParam.time"
              :ranges="{
              '1周': [moment().startOf('day').subtract(1, 'weeks'), moment()],
              半个月: [moment().startOf('day').subtract(14, 'days'), moment()],
              '3个月': [moment().startOf('day').subtract(3, 'months'), moment()],
              '6个月': [moment().startOf('day').subtract(6, 'months'), moment()],
              '1年': [moment().startOf('day').subtract(1, 'years'), moment()],
            }"
              format="YYYY-MM-DD"
              @change="onChangeData"
              :disabled-date="disabled"
            />
          </a-form-item>
          <a-form-item label="用户ID">
            <a-input v-model="queryParam.userNo" placeholder="用户ID" />
          </a-form-item>
          <a-form-item label="登录名">
            <a-input v-model="queryParam.userPhone" placeholder="登录名" />
          </a-form-item>
          <a-form-item label="操作人">
            <a-input v-model="queryParam.operator" placeholder="操作人" />
          </a-form-item>
          <a-form-item label="调整类型">
            <a-select v-model="queryParam.adjustmentType" placeholder="请选择调整类型" style="width: 200px">
              <a-select-option :key="item.key" v-for="item in option" @onchange="onchange(item)">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" htmlType="submit" @click="search">查询</a-button>
            <a-button htmlType="submit" class="ml15" @click="searchReset">重置</a-button>
            <a-button htmlType="submit" type="primary" class="ml15" @click="visible2 = true">+新增调整</a-button>
          </a-form-item>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        :columns="columns"
        :data="loadData"
        bordered
        :rowKey="(record) => record.id"
      >
        <div slot="adjustmentType" slot-scope="text">
          <span v-if="text === 0" class="red">增加</span>
          <span v-else class="green">减少</span>
        </div>
        <div slot="adjustmentAmount" slot-scope="text, record">
        <span :class="record.adjustmentType === 0 ? 'red' : 'green'">{{
            `${record.adjustmentType === 0 ? '+' : '-'}${common.numFormat(record.adjustmentAmount)}`
          }}</span>
        </div>
        <div slot="adjustmentWalletType" slot-scope="text">
          <span v-if="text === 0">资产金额</span>
          <span v-else>余额</span>
        </div>
        <span slot="action" slot-scope="text, record">
        <a @click="view(record)">查看详情</a>
      </span>
      </s-table>
      <a-modal v-model="visible" title="查看详情" class="modal">
        <template #footer>
          <a-button type="primary" @click="visible = false"> 关闭 </a-button>
        </template>
        <div class="user_harder_img">
          <span>头像：</span>
          <img :src="require('@/assets/images/header.png')" alt="" />
        </div>
        <div class="user_info">
          <div class="item">
            <div>
              <span>用户ID：</span><span>{{ info?.userNo }}</span>
            </div>
            <div>
              <span>登录名：</span><span>{{ info?.userPhone }}</span>
            </div>
          </div>
          <div class="item">
            <div>
              <span>注册时间：</span><span>{{ info?.registerTimer }}</span>
            </div>
            <div>
              <span>账户状态：</span><span>{{ accountStateType[info?.accountState] }}</span>
            </div>
          </div>
          <div class="item">
            <div>
              <span>当前余额：</span><span>{{ common.numFormat(info?.currentBalance) }}</span>
            </div>
          </div>
        </div>
        <div class="user_info">
          <div class="item">
            <div>
              <span>调整类型：</span><span>{{ info?.adjustmentType === 1 ? '减少' : '增加' }}</span>
            </div>
            <div>
              <span>调整金额：</span><span>{{ common.numFormat(info?.adjustmentAmount) }}</span>
            </div>
          </div>
        </div>
        <div class="user_info">
          <div class="item">
            <div>
              <span>操作人ID：</span><span>{{ info?.operatorId }}</span>
            </div>
            <div>
              <span>操作人昵称：</span><span>{{ info?.operatorNickName }}</span>
            </div>
          </div>
          <div class="item">
            <div>
              <span>操作时间：</span><span>{{ info?.operateTime }}</span>
            </div>
          </div>
        </div>
        <div class="user_info">
          <div class="item">
            <span>备注：</span>
            <a-input v-model="info.remark" type="textarea" disabled :rows="4" class="textarea" />
          </div>
        </div>
      </a-modal>
      <a-modal title="提示信息" v-model="visible1" @ok="handleOk1">
        <p>确定要{{ userToast.adjustmentType === '0' ? '增加' : '减少' }}金额数？</p>
        <p>
          注：[用户ID：{{ userToast.userNo }}] {{ userToast.adjustmentType === '0' ? '增加' : '减少' }}
          {{ userToast.adjustmentAmount }}
        </p>
      </a-modal>
      <a-modal title="新增调整" v-model="visible2" @ok="handleOk">
        <a-form :form="form" class="permission-form">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户ID">
            <a-input
              v-decorator="[
              'userNo',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入用户ID!',
                  },
                ],
              },
            ]"
              placeholder="请输入用户ID"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="调整钱包">
            <a-select
              v-decorator="['adjustmentWalletType', { rules: [{ required: true, message: '请选择调整钱包!' }] }]"
              placeholder="请选择调整钱包"
            >
              <a-select-option value="0">资产金额</a-select-option>
              <a-select-option value="1">余额 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :wrapperCol="wrapperCol" :labelCol="labelCol" label="调整类型">
            <a-select
              v-decorator="['adjustmentType', { rules: [{ required: true, message: '请选择调整类型!' }] }]"
              placeholder="请选择调整类型"
            >
              <a-select-option value="0">增加</a-select-option>
              <a-select-option value="1">减少</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="调整金额">
            <a-input
              v-decorator="[
              'adjustmentAmount',
              {
                rules: [{ required: true, message: '请输入调整金额!' }],
              },
            ]"
              placeholder="请输入调整金额"
            />
          </a-form-item>

          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
            <a-textarea
              v-decorator="['remark']"
              placeholder="请输入备注内容"
              :auto-size="{ minRows: 3, maxRows: 5 }"
              :maxLength="100"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script>
import STable from '@/components/Table'
import { userBalanceAdjustmentList, userBalanceAdjustmentDetail, userBalanceAdjustmentSave } from '@/api/user-manage'
import { mapGetters } from 'vuex'
import moment from 'moment'
import { common } from '@/common/index'
export default {
  name: 'userList',
  components: {
    STable,
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  data() {
    return {
      form: this.$form.createForm(this),
      formLayout: 'horizontal',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      visible: false,
      visible1: false,
      visible2: false,
      info: {},
      userToast: {},
      option: [
        { label: '增加', value: 0, key: 0 },
        { label: '减少', value: 1, key: 1 },
      ],
      columns: [
        {
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'center'
        },
        {
          title: '用户ID',
          dataIndex: 'userNo',
          align: 'center'
        },
        {
          title: '登录名',
          dataIndex: 'userPhone',
          align: 'center'
        },
        {
          title: '调整类型',
          dataIndex: 'adjustmentType',
          slots: { title: 'adjustmentType' },
          scopedSlots: { customRender: 'adjustmentType' },
          align: 'center'
        },
        {
          title: '调整金额',
          dataIndex: 'adjustmentAmount',
          // customRender: (text) => common.numFormat(text),
          slots: { title: 'adjustmentAmount' },
          scopedSlots: { customRender: 'adjustmentAmount' },
          align: 'center'
        },
        {
          title: '调整钱包',
          dataIndex: 'adjustmentWalletType',
          slots: { title: 'adjustmentWalletType' },
          scopedSlots: { customRender: 'adjustmentWalletType' },
          align: 'center'
        },
        {
          title: '账变前',
          dataIndex: 'beforeAmount',
          customRender: (text) => this.common.numFormat(text),
          align: 'center'
        },
        {
          title: '账变后',
          dataIndex: 'afterAmount',
          customRender: (text) => this.common.numFormat(text),
          align: 'center'
        },
        {
          title: '操作人',
          dataIndex: 'operator',
          align: 'center'
        },
        {
          title: '操作时间',
          dataIndex: 'operateTime',
          align: 'center'
        },
        {
          title: '备注',
          dataIndex: 'remark',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          slots: { title: 'action' },
          scopedSlots: { customRender: 'action' },
          align: 'center'
        },
      ],
      // 查询条件参数
      queryParam: { time: [null, null], userNo: '', userPhone: '', operator: '' },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const { userId } = this.userInfo

        let params = {
          ...parameter,
          userId,
          ...this.queryParam,
          startTime: this.queryParam.time[0] ? `${this.queryParam.time[0]} 00:00:00` : '',
          endTime: this.queryParam.time[1] ? `${this.queryParam.time[1]} 23:59:59` : '',
        }
        delete params.time
        return new Promise((resolve, reject) => {
          userBalanceAdjustmentList(params)
            .then((res) => {
              if (res.code === 200) {
                resolve(res.data)
              } else {
                this.$message.error(res?.msg)
              }
            })
            .catch((err) => {
              reject(err)
            })
            .finally(() => {})
        })
      },
      accountStateType: ['启用', '禁用', '冻结'],
    }
  },
  methods: {
    moment,
    onChangeData(dates, dateStrings) {
      this.queryParam.time = dateStrings
    },
    disabled(current) {
      return current && current > moment().subtract().endOf('day')
    },
    view(row) {
      this.visible = true
      const { userId } = this.userInfo
      let params = {
        recordId: row.recordId,
        userId,
      }
      userBalanceAdjustmentDetail(params).then((res) => {
        if (res.code === 200) {
          this.info = res.data ?? {}
        }
      })
    },
    refresh(isBackToFirstPage = false) {
      this.$refs.table.refresh(isBackToFirstPage)
    },
    onchange(data) {
      this.queryParam.adjustmentType = data.key
    },
    search() {
      this.refresh(false)
    },
    searchReset() {
      this.queryParam = { time: [null, null], userNo: '', userPhone: '', operator: '', adjustmentType: '' }
      this.refresh(true)
    },
    handleOk1() {
      const { userId } = this.userInfo
      const params = {
        ...this.userToast,
        adjustmentType: +this.userToast.adjustmentType,
        adjustmentWalletType: +this.userToast.adjustmentWalletType,
        userId,
      }
      userBalanceAdjustmentSave(params).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.visible1 = false
          this.visible2 = false
          this.$refs.table.refresh()
          this.form.resetFields()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleOk(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(err, values)
          this.userToast = values
          this.visible1 = true
        }
      })
    },
    onCancel() {
      this.visible2 = false
    },
  },
}
</script>
<style lang="less" scoped>
.user_balances_list {
  .form {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .red {
    color: #e94141;
  }
  .green {
    color: #46c16a;
  }
  .permission-form {
    :deep(.permission-group) {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}
.modal {
  /deep/ .ant-modal {
    width: 1000px !important;
  }
  .user_harder_img {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    span {
      padding-left: 15px;
    }
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
  }
  .user_info {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    border-bottom: 1px solid #f3f4f6;
    &:last-child {
      border-bottom: none;
    }
    .item {
      display: flex;
      div {
        height: 40px;
        width: 50%;
      }
      span {
        &:first-child {
          width: 100px;
          text-align: left;
          padding: 0 15px;
        }
        &:last-child {
          text-align: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .textarea {
        width: 80%;
      }
    }
  }
}
</style>
